<mat-list-item matRipple [matRippleDisabled]="node.disabled" [ngClass]="selectedListClasses" *ngIf="!node.hidden"
  (click)="expand(node)" title="{{node.label}}"
  [ngStyle]="getListStyle()">
  <div class="anml-data" [dir]="isRtlLayout() ? 'rtl' : 'ltr'">
    <div class="icon-container" [ngSwitch]="getListIcon(node)">
      <span *ngSwitchCase="'faicon'" class="amml-icon amml-icon-fa">
        <i [ngClass]="getSelectedFaIcon()"></i>
      </span>
      <mat-icon *ngSwitchCase="'icon'" class="amml-icon">
        {{getSelectedIcon()}}
      </mat-icon>
      <mat-icon *ngSwitchCase="'svgicon'" svgIcon="{{getSelectedSvgIcon()}}" class="amml-icon amml-svg-icon">
      </mat-icon>
      <img matListAvatar *ngSwitchCase="'imageicon'" class="amml-icon" src="{{getSelectedImageIcon()}}" alt="{{node.label}}"/>
    </div>
    <span class="label">{{node.label}}</span>
  </div>
  <div class="amml-icon-arrow-container" *ngIf='hasItems()'>
    <mat-icon *ngIf='!isRtlLayout()' [@isExpandedLTR]="expanded ? 'yes' : 'no'">
      keyboard_arrow_down
    </mat-icon>
    <mat-icon *ngIf='isRtlLayout()'  [@isExpandedRTL]="expanded ? 'yes' : 'no'">
      keyboard_arrow_down
    </mat-icon>
  </div>
</mat-list-item>

<div *ngIf="hasItems() && expanded" [@slideInOut] [dir]="isRtlLayout() ? 'rtl' : 'ltr'" [ngClass]="classes" style="background-color: rgb(211, 209, 209);">
  <ng-list-item *ngFor="let singleNode of nodeChildren | keyvalue : multilevelMenuService.kvDummyComparerFn"
    [nodeConfiguration]='nodeConfiguration'
    [node]="singleNode.value"
    [level]="level + 1"
    [submenuLevel]="singleNode.key"
    [selectedNode]='selectedNode'
    (selectedItem)="selectedListItem($event)">
  </ng-list-item>
</div>
